<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="70%" :show-close='false' class="addformulaDialog"
	 :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">
		  	公式
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<div style="width:35%;float:left;height:100%;">
			<el-table :data="methodsInfo.itemBeanList" style="width:100%;height:50%;" size="mini" class="tableCon" @row-click="selectitemBean">
				<el-table-column label="序号" fixed min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="itemName" label="检测项目" fixed min-width="150px">
				</el-table-column>
			</el-table>
			<el-table :data="methodsInfo.analysisBeanList" style="width: 100%;height:50%;"  class="tableCon" size="mini"  @row-click="selectAnalysisBean">
				<el-table-column label="序号" fixed min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="name" label="分析项名称" fixed min-width="150px">
				</el-table-column>
			</el-table>
		</div>
		<div style="width:calc(65% - 10px);float:right;height:100%;">
			<el-table :data="slopeList" style="width: 100%;" size="mini" height="110px" @row-click="selectSlope">
				<el-table-column label="序号" fixed min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="name" label="名称" fixed min-width="150px">
				</el-table-column>
				<el-table-column property="slope" label="符号">
				</el-table-column>
				<!--<el-table-column property="slope" label="斜率" fixed min-width="150px">
				</el-table-column>-->
			</el-table>
			<div style="display:none;">
				公式：
				<el-input v-model="formulaItem" size="mini" type="textarea" :rows="2"></el-input>
				公式：
				<el-input v-model="formulaItemName" size="mini" type="textarea" :rows="2"></el-input>
			</div>
			<p style="margin-top:10px;">
				公式：
			</p>
			<div id="content"></div>
			<div style="margin-top:10px;height:calc(100% - 280px)">
				<ul class="formulaUl">
					<li class="operateLi" @click="deleteAll">C</li>
					<li class="operateLi" @click="deleteItem">⬅</li>
					<li v-for="item in operatorArr" :key="item.value" :ref="item.ref" class="operateLi" @click="clickButton(item.value)">
						{{item.label}}
					</li>
					<li class="operateLi" @click="showMore = !showMore">更多</li>
					<li v-for="item in operatorArr1" :key="item.value" :ref="item.ref" class="operateLi" @click="clickButton(item.value)" v-if="showMore">
						{{item.label}}
					</li>
				</ul>
			</div>
		</div>
		<!--newOrEdit != 'copy' && newOrEdit != 'look' &&  newOrEdit != 'review'-->
		<span slot="footer" class="dialog-footer" v-if = "newOrEdit == 'new' || newOrEdit == 'copy'  || newOrEdit == 'newVersion' || newOrEdit == 'edit'">
			<el-button type="primary" size="mini" @click="submit">提 交</el-button>
			<el-button  size="mini" @click="close">取 消</el-button>
		</span>
	</el-dialog>

</template>

<script>
	import { mapState } from 'vuex'
	import $ from 'jquery';

	export default {
		data() {
			return {
				showMore: false,
				methodsInfo: {},
				formulaItemArray: [],
				formulaItem: "",  //传给后台的公式code
				formulaItemNameArray: [],
				formulaItemName: "", //展示再前端的名字
				operatorArr: [
					{ value: '(', label: '(' },
					{ value: ')', label: ')' },
					{ value: '7', label: '7' },
					{ value: '8', label: '8' },
					{ value: '9', label: '9' },
					{ value: '/', label: '/' },
					{ value: '4', label: '4' },
					{ value: '5', label: '5' },
					{ value: '6', label: '6' },
					{ value: '*', label: '*' },
					{ value: '1', label: '1' },
					{ value: '2', label: '2' },
					{ value: '3', label: '3' },
					{ value: '+', label: '+' },
					{ value: '0', label: '0' },
					{ value: '.', label: '.' },
					{ value: '-', label: '-' },
				],
				operatorArr1: [
					{ value: '?', label: '?' },
					{ value: ':', label: ':' },
					{ value: '==', label: '==' },
				],
				slopeList: [ {
					slope: "a",
					name: "斜率"
				},{
					slope: "b",
					name: "截距"
				},]


			}
		},
		props: ['addVisible', 'methodsForm', 'allItem', 'rowInfo', 'itemOrAnalysis','newOrEdit'],
		components: {

		},

		computed: {
			...mapState(['dataSelect']),
		},
		mounted() {
			this.$store.dispatch('dogetDictionary');
		},
		watch: {
			addVisible(val, oldVal) {
				if (val) {
					this.methodsInfo = JSON.parse(JSON.stringify(this.methodsForm))
					console.log(this.methodsInfo)
					// id为空，即新增的检测项不显示再公式页面 或者检测项为文本型 或者是当前点击的行
					for (var i = this.methodsInfo.itemBeanList.length - 1; i >= 0; i--) {
						if(typeof this.methodsInfo.itemBeanList[i].itemName == "object"){
							this.methodsInfo.itemBeanList[i].id = ""
						}
						if (this.methodsInfo.itemBeanList[i].id == undefined || this.methodsInfo.itemBeanList[i].id == '' || this.methodsInfo.itemBeanList[i].dataType == 'DT002' || this.rowInfo.id == this.methodsInfo.itemBeanList[i].id) {
							this.methodsInfo.itemBeanList.splice(i, 1);
						}
					}
					// id为空，即新增的分析项不显示再公式页面
					for (var i = this.methodsInfo.analysisBeanList.length - 1; i >= 0; i--) {
						
						if (this.methodsInfo.analysisBeanList[i].id == undefined || this.methodsInfo.analysisBeanList[i].id == '' || this.methodsInfo.analysisBeanList[i].dataType == 'DT002' || this.rowInfo.id == this.methodsInfo.analysisBeanList[i].id) {
							this.methodsInfo.analysisBeanList.splice(i, 1);
						}
					}
					// 如果点击的一行添加过公式，展示公式
					console.log(this.rowInfo)
					if (this.rowInfo.formula != undefined && this.rowInfo.formula != null) {
						this.formulaItem = this.rowInfo.formula;
						this.formulaItemName = this.rowInfo.formulaAlias;
						this.formulaItemArray = this.rowInfo.formula.split(",");
						this.formulaItemNameArray = this.rowInfo.formulaAlias.split(",");

						var showArr = this.rowInfo.formulaAlias.split(",");
						setTimeout(function () {
							for (var i = 0; i < showArr.length; i++) {
								if (showArr[i].substr(0, 1) == "{" && showArr[i].substr(-1) == "}") {//是分析项目或者检测项目
									// console.log(showArr[i].substr(0,1),showArr[i].substr(-1))
									var value = showArr[i].replace(/{/g, '');
									value = value.replace(/}/g, '');
									$("#content").append("<span class = 'contentSpan'>" + value + "</span>")
								} else {
									$("#content").append("<span>" + showArr[i] + "</span>")
								}
							}
						}, 300)

					}
				}
			}
		},
		methods: {

			//关闭
			close(formName) {
				this.$emit('update:addVisible', false);
				this.formulaItemArray = [];
				this.formulaItem = "";
				this.formulaItemNameArray = [];
				this.formulaItemName = "";
				$("#content").empty();

			},
			selectitemBean(val) { //点击选中的检测项
				this.formulaItemArray.push('#' + val.itemCode + '#');
				this.formulaItemNameArray.push("{" + val.itemName + "}");
				$("#content").append("<span class = 'contentSpan'>" + val.itemName + "</span>")
				this.updateContent();
			},
			selectAnalysisBean(val) {//点击选中的分析项
				this.formulaItemArray.push('{' + val.code + '}');
				this.formulaItemNameArray.push("{" + val.name + "}");
				$("#content").append("<span class = 'contentSpan'>" + val.name + "</span>")
				this.updateContent();
			},
			selectSlope(val) {
				this.formulaItemArray.push(val.slope);
				this.formulaItemNameArray.push(val.slope);
				$("#content").append("<span>" + val.slope + "</span>")
				this.updateContent();
			},
			updateContent() { //更新formulaItem和formulaItemName
				this.formulaItem = this.formulaItemArray.join();
				this.formulaItemName = this.formulaItemNameArray.join();
			},
			deleteItem() { //删除公式的最后一项
				this.formulaItemArray.splice(this.formulaItemArray.length - 1, 1);
				this.formulaItemNameArray.splice(this.formulaItemNameArray.length - 1, 1)
				$("#content span:last").remove()
				this.updateContent();
			},
			deleteAll() { //清空公式
				this.formulaItemArray.splice(0);
				this.formulaItemNameArray.splice(0)
				$("#content").empty()
				this.updateContent();
			},
			clickButton(val) { //点击键盘数组里面加入对应值
				this.formulaItemArray.push(val);
				this.formulaItemNameArray.push(val);
				$("#content").append("<span>" + val + "</span>")
				this.updateContent();
			},
			submit() { //提交添加公式
				var data = {
					formula: this.formulaItem,
					formulaAlias: this.formulaItemName,
				}

				if (this.itemOrAnalysis == 'analysis') {
					data.code = this.rowInfo.code;
					var url = "/technology/addAnalysisFormula.htm";
				} else {
					data.id = this.rowInfo.id;
					var url = '/technology/addItemFormula.htm'
				}
				// addAnalysisFormula

				this.$http({
					method: 'post',
					apiUrl: url,
					params: data,
					isJson: true,
				}).then(res => {
					if (res.code == 0) {
						this.$message({
							type: 'success',
							message: '提交成功!'
						});
						this.rowInfo.formula = this.formulaItem; //公式添加成功后手动给点击的列添加formula和formulaAlias
						this.rowInfo.formulaAlias = this.formulaItemName;
						this.close();

					}
				})
			},


		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.addformulaDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.addformulaDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}

	.addformulaDialog .heighHalf {
		height: calc(100% - 60px)
	}

	.addformulaDialog .heighHalf .height40 {
		height: 40px;
		line-height: 40px;
	}

	#content {
		height: 123px;
		width: 100%;
		border: 1px solid #e6e6e6;
		border-radius: 5px;
		margin-top: 8px;
		padding: 4px;
		overflow-y: auto;
	}

	.addformulaDialog .formulaUl {
		height:100%;
		overflow: auto;
		width: 310px;
		margin: auto;
	}

	.addformulaDialog .operateLi {
		float: left;
		text-align: center;
		line-height: 30px;
		width: 47px;
		height: 30px;
		border: 1px solid #dcdfe6;
		color: #606266;
		border-radius: 5px;
		margin: 8px;
		/*display: inline-block;*/
	}

	.addformulaDialog .operateLi:hover {
		color: #409EFF;
		border-color: #c6e2ff;
		background-color: #ecf5ff
	}

	.addformulaDialog .contentSpan {
		min-width: 56px;
		height: 30px;
		line-height: 22px;
		display: inline-block;
		border: 1px #dcdfe6 solid;
		border-radius: 2px;
		margin: 4px;
		text-align: center;
		padding: 3px;
		font-size: 12px
	}
</style>